<template>
    <div class="">
        <div class="activeCode ba_f">
            <div class="service">
                <div class="tit">用专业服务用户</div>
                <div class="cont">
                    <input v-model="auth_code" type="" name="" class="code" placeholder="请输入激活码">
                    <button class="buy" @click="submitAtuh"><span>立即使用</span></button>
                </div>
                <ul class="tipps">
                    <li>
                        <p class="q">问：什么是激活码？</p>
                        <p><span class="colory">答：</span>激活码是发放可兑换软件服务产品的一串随机字母凭证，兑换成功后店铺将获得对应生效周期的服务。</p>
                    </li>
                    <li>
                        <p class="q">问：如何获得激活码？</p>
                        <p><span class="colory">答：</span>购买后联系客服获得激活码。</p>
                    </li>
                    <li>
                        <p class="q">问：如何使用激活码？</p>
                        <p><span class="colory">答：</span>获得激活码以后，可在激活码兑换页，输入激活码，进行兑换。每个激活码仅可兑换一次，兑换成功后，即可获得相应的使用期限。</p>
                    </li>
                    <li>
                        <p class="q">问：激活码有效期是多久？</p>
                        <p><span class="colory">答：</span>激活码的兑换有效期为365日，自激活生成之时起开始计算。</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {checkAuth} from "@/api/setup";
    export default {
        name: "activationcode",
        data() {
            return {
                auth_code:'',
            };
        },
        mounted() {
        },
        methods: {
            async submitAtuh(){
                if(this.auth_code){
                    const {type,msg} = await checkAuth({auth_code:this.auth_code});
                    this.$baseMessage(msg, "success");
                    if(type=='1'){
                        this.$router.push({path: '/'})
                    }
                }
                else {
                    this.$baseMessage('请输入激活码', "warning");
                }
            },
        },
    };
</script>

<style lang="scss" scoped>

    .service {
        padding-top: 135px;
        font-size: 14px
    }

    .service .tit {
        text-align: center;
        font-size: 24px;
    }

    .service .cont {
        padding: 30px 0 100px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service .cont .code {
        width: 450px;
        height: 80px;
        border: 1px solid #d3d2d2;
        border-right: initial;
        text-align: center;
        font-size: 24px;
        outline: none;
    }

    .service .cont .buy {
        width: 135px;
        height: 80px;
        border: 0;
        background-color: #2A75ED;
        color: #fff;
        font-size: 18px;
        text-align: center;
        cursor: pointer;
        outline: none;
        border-radius: 0;
    }

    .service .tipps {
        /*background-color: #f7f7f6;*/
        padding: 35px;
    }

    .service .tipps li {
        margin-bottom: 30px;
        line-height: 30px;
    }

    .service .colory {
        color: #2A75ED;
    }

    .service .tipps .q {
        color: #333;
        font-weight: bolder;
        margin-bottom: 5px;
    }

    .service .tipps .a {
        color: #666;
    }
</style>
